<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./index.css">
</head>
<div id="wrapper">

</div>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    var $Div = $('#wrapper');
    var isShow = [false, false, false, false];
    $.ajax({
      url: 'http://api.fgdemoshow.cn/api/login',
      type: 'POST',
      xhrFields: {
        withCredentials: true
      },
      data: {
        username: 'dafeige',
        password: '123456'
      },
      success: function (res) {
        if (res && res.status === 1) {
          $.ajax({
            url: 'http://api.fgdemoshow.cn/api/getIndent',
            xhrFields: {
              withCredentials: true
            },
            type: 'GET',
            success: function (res) {
              if (res.status === 1) {

                res.data.forEach(function (ele, index) {
                  var tempTime = ele.createdAt.split('T');
                  var time = tempTime[0] + ' ' + tempTime[1].substr(0, tempTime[1].indexOf('.'));
                  // 每一个订单的容器
                  var $Li = $('<li class="item"></li>');
                  // 每一个物流详情的容器
                  var $DivLog = $('<div class="log_wrapper"></div>');
                  // 订单商品图片
                  var $Img = $('<img class="item_img" src="' + ele.imgUrl + '"></img>');
                  // 按钮
                  var $Btn = $('<div class="logistics">物流信息<p class="btn iconfont icon-xia"></p></div>');
                  $Btn.data('id', ele.ordersId);
                  // 订单详情
                  var $Details = $(`<div class="item_details">
                    <p class="name"> ${ele.name} </p>
                    <p class="target_site"> 收货地址： ${ele.targetSite} </p>
                    <p class="price"> <span>价格:</span> <span>${ele.price} x ${ele.num} </span></p>
                    <p class="time"> ${time} </p>
                    </div>`);
                  $Li.append($Img).append($Details).append($Btn);
                  $Div.append($Li);
                  $Div.append($DivLog);
                });
                $('.logistics').each(function (index, item) {
                  $(item).click(function () {
                    var id = $(this).data('id')
                    $.ajax({
                      url: `http://api.fgdemoshow.cn/api/getLogistics?id=${id}`,
                      xhrFields: {
                        withCredentials: true
                      },
                      type: 'GET',
                      success: function (res) {
                        var logistics = JSON.parse(res.data.logistics);
                        if (isShow[index]) {
                          $('.log_wrapper').eq(index).hide(500);
                          $('.log_wrapper').eq(index).children().remove();
                          $('.logistics').eq(index).children('.btn').removeClass('icon-top').addClass('icon-xia');
                          // 重置isShow
                          isShow.forEach(function(item, j) {
                            isShow[j] = false
                          })
                        } else {
                          var logBox = $('<div class="log_box"></div>');
                          $.each(logistics, function (i, item) {
                            // 循环渲染每条物流信息
                            var $Logistics = $(`<div class="log_item">
                              <div>${item.time}</div>
                                <img src="./imgs/2.png" class="log_icon"></img>
                                <div>${item.site}</div>
                              </div>`);
                            logBox.append($Logistics);
                            $('.log_wrapper').eq(index).css({ height: 140 * logistics.length }).show('slow');
                            $('.log_wrapper').eq(index).append(logBox);
                            $('.log_wrapper').eq(index).siblings('.log_wrapper').hide(500).children().remove()
                          });
                          // 重置isShow
                          isShow.forEach(function(item, j) {
                            if (j === index) {
                              isShow[j] = true;
                              $('.logistics').eq(j).children('.btn').removeClass('icon-xia').addClass('icon-top');
                            } else {
                              isShow[j] = false
                              $('.logistics').eq(j).children('.btn').removeClass('icon-top').addClass('icon-xia');
                            }
                          });
                        }
                      }
                    })
                  })
                })
              } else {
                window.alert(res.msg)
              }
            }
          })
        } else {
          window.alert(res.msg)
        }
      }
    });

  </script>
</body>

</html>